<!DOCTYPE html>

<html lang="en">

<head th:substituteby="fragments/headTag :: headTag">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title>PetClinic :: a Spring Framework demonstration</title>

    <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap.min.css"
        th:href="@{/webjars/bootstrap/2.3.0/css/bootstrap.min.css}" rel="stylesheet"/>
    <link href="../../../resources/css/petclinic.css"
        th:href="@{/resources/css/petclinic.css}" rel="stylesheet"/>
    
    <script  src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"
        th:src="@{/webjars/jquery/1.9.0/jquery.js}"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"
        th:src="@{/webjars/jquery-ui/1.9.2/js/jquery-ui-1.9.2.custom.js}"></script>
    
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/smoothness/jquery-ui.css"
        th:href="@{/webjars/jquery-ui/1.9.2/css/smoothness/jquery-ui-1.9.2.custom.css}" rel="stylesheet"></link>
</head>


<body>
<script>
    $(function () {
        $("#date").datepicker({ dateFormat: 'yy/mm/dd'});
    });
</script>
<div class="container">
    <div th:include="fragments/bodyHeader" th:remove="tag">
    
        <img th:src="@{/resources/images/banner-graphic.png}" 
            src="../../../resources/images/banner-graphic.png"/>
        
        <div class="navbar" style="width: 601px;">
            <div class="navbar-inner">
                <ul class="nav">
                    <li style="width: 100px;"><a href="../welcome.html" th:href="@{/}"><i class="icon-home"></i>Home</a></li>
                    <li style="width: 130px;"><a href="../owners/findOwners.html" th:href="@{/owners/find.html}"><i class="icon-search"></i>Find owners</a></li>
                    <li style="width: 140px;"><a href="../vets/vetList.html" th:href="@{/vets.html}"><i class="icon-th-list"></i>Veterinarians</a></li>
                    <li style="width: 90px;"><a href="../exception.html" th:href="@{/oups.html}" title="trigger a RuntimeException to see how it is handled"><i class="icon-warning-sign"></i>Error</a></li>
                    <li style="width: 80px;"><a href="#" title="not available yet. Work in progress!!"><i class=" icon-question-sign"></i>Help</a></li>
                </ul>
            </div>
        </div>
            
            
    </div>

    <h2><span th:if="${visit['new']}" th:remove="tag">New </span>Visit</h2>

    <b>Pet</b>
    <table class="table table-striped">
        <thead>
        <tr>
            <th>Name</th>
            <th>Birth Date</th>
            <th>Type</th>
            <th>Owner</th>
        </tr>
        </thead>
        <tr>
            <td th:text="${visit.pet.name}">[name]</td>
            <td th:text="${#dates.format(visit.pet.birthDate.toDate(), 'yyyy/MM/dd')}">[birthdate]</td>
            <td th:text="${visit.pet.type.name}">[type]</td>
            <td th:text="${visit.pet.owner.firstName + ' ' + visit.pet.owner.lastName}">[firstName lastName]</td>
        </tr>
    </table>

    <form th:object="${visit}" action="../owners/ownerDetails.html" th:action="@{${#httpServletRequest.servletPath}}" method="post">
        <div class="control-group">
            <label class="control-label">Date </label>

            <div class="controls">
                <input type="text" th:field="*{date}" id="date"/>
                <span class="help-inline" th:errors="*{date}">[date error]</span>
            </div>
        </div>
        <div class="control-group">
            <label class="control-label">Description </label>

            <div class="controls">
                <input type="text" th:field="*{description}"/>
                <span class="help-inline" th:errors="*{description}">[description error]</span>
            </div>
        </div>
        <div class="form-actions">
            <input type="hidden" name="petId" th:value="${visit.pet.id}"/>
            <button type="submit">Add Visit</button>
        </div>
    </form>

    <br/>
    <b>Previous Visits</b>
    <table style="width: 333px;">
        <tr>
            <th>Date</th>
            <th>Description</th>
        </tr>
        <c:forEach var="visit" items="${visit.pet.visits}">
                <tr th:if="${!visit['new']}">
                    <td><joda:format value="${visit.date}" pattern="yyyy/MM/dd"/></td>
                    <td th:text="${visit.description}">[description]</td>
                </tr>
        </c:forEach>
    </table>

</div>
    <table th:substituteby="fragments/footer :: footer" class="footer">
        <tr>
            <td></td>
            <td align="right">
               <img src="../../../resources/images/springsource-logo.png"
                th:src="@{/resources/images/springsource-logo.png}" alt="Sponsored by SpringSource" />
            </td>
        </tr>
    </table>

</body>

</html>
